<template>
	<view class="recommend">
		<view class="top flex bt">
			<view class="text">
				<text>
					宠物星推荐
				</text>
				<image src="../../static/icon/tuijian.png" mode="" class="dingwei"></image>
			</view>
			<view class="more" @click="openShop">
				<text>
					查看更多
				</text>
				<image src="../../static/icon/right.png" mode="" class="rightpic"></image>
			</view>
		</view>
		<view class="bottom">
			<u-scroll-list indicatorBarWidth="30">
				<view v-for="(item, index) in list" :key="index" @click="onSwiperClick(item,index)">
					<image :src="item.thumb" class="bottomimg"></image>
				</view>
			</u-scroll-list>
		</view>
	</view>
</template>

<script>
	export default {
		name: "recommend",
		data() {
			return {
				list: [
					{
					thumb: "https://cdn.uviewui.com/uview/goods/1.jpg",
					goodsid:0,
				}, {
					thumb: "https://cdn.uviewui.com/uview/goods/2.jpg",
					goodsid:0,
				}, {
					thumb: "https://cdn.uviewui.com/uview/goods/3.jpg",
					goodsid:0,
				}, {
					thumb: "https://cdn.uviewui.com/uview/goods/4.jpg",
					goodsid:0,
				}, {
					thumb: "https://cdn.uviewui.com/uview/goods/5.jpg",
					goodsid:0,
				}]
			};
		},
		methods:{
			onSwiperClick(item,index){
				// this.$emit('onSwiperClick',item,index)
				uni.navigateTo({
					// url:"/subpack/recommends/recommends?goodsid="+item.goodsid
					url:"/subpack/recommends/recommends"
				})
				// console.log(item)
			},
			openShop(){
				uni.switchTab({
					url: '/pages/tabbar/shopping/index'
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.recommend {
		margin-top: $uni-spacing-col-lg;

		.top {
			margin: $uni-spacing-row-lg 0;
			.text {
				color: $uni-text-color-gold;
				font-size: $uni-font-size-lg;
				font-weight: 800;

				.dingwei {
					width: 32rpx;
					height: 32rpx;
					margin-left: $uni-spacing-col-sm;
				}
			}

			.more {
				.rightpic {
					width: 32rpx;
					height: 32rpx;
					padding-top: 10rpx;
					font-size: $uni-font-size-sm;
					color: $uni-text-color-grey;
				}
			}
		}
		.bottom{
			.bottomimg{
				height: 330upx;
				margin: 0 10upx ;
			}
		}
	}
</style>